<!DOCTYPE html>
<html lang="en">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="utf-8">
  
  
    <meta name="keywords" content="Java">
  
  
    <meta name="description" content="Thu Apr 11 2019 08:00:00 GMT+0800 (GMT+08:00)">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    Hexo+github搭建属于自己的个人博客 |
    
    Sean</title>
  
    <link rel="shortcut icon" href="/favicon.ico">
  
  <link rel="stylesheet" href="/css/style.css">
  
    <link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
  
  <script src="/js/pace.min.js"></script>
</head>
</html>
<body>
<main class="content">
  <section class="outer">
  <article id="post-Hexo-github搭建属于自己的个人博客" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Hexo+github搭建属于自己的个人博客
    </h1>
  

      </header>
    

    
      <div class="article-meta">
        <a href="/2019/04/11/Hexo-github搭建属于自己的个人博客/" class="article-date">
  <time datetime="2019-04-11T15:42:16.000Z" itemprop="datePublished">2019-04-11</time>
</a>
        
      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h2 id="Hexo-guthub搭建属于自己的个人博客-Mac环境下"><a href="#Hexo-guthub搭建属于自己的个人博客-Mac环境下" class="headerlink" title="Hexo+guthub搭建属于自己的个人博客(Mac环境下)"></a>Hexo+guthub搭建属于自己的个人博客(Mac环境下)</h2><p>因为最近要写博客考虑了很多最后还是选择了自建博客顺便结合一下我的公众号同时发布，下面就介绍一下如何使用hexo+github搭建自己的博客，当然也可以使用码云 速度比github快的多 但是码云的pages很烦每次必须手动去发布一下除非你花钱开通了pro。</p>
<p>由于我使用的是mac所以就讲一下mac下的搭建方法。首先你要有一个github账号和仓库，怎么注册我就不说了，不会的自行百度。Mac本身自带了git所以这里就不讲git的安装了。</p>
<a id="more"></a>
<h3 id="1-安装node"><a href="#1-安装node" class="headerlink" title="1.安装node"></a>1.安装node</h3><p>由于hexo是基于node.js的一个静态页面博客生成框架(以下就简称node)，所以首先需要安装node，如果不知道自己有没有安装node，打开终端然后输入以下命令来查看是否已经安装了node。</p>
<p>输入命令：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure>
<p>如果像下图这样显示版本号则说明已安装node.js</p>
<p><img src="/images/temp/屏幕快照 2019-04-12 下午10.24.26.png" alt></p>
<p>如果没有显示版本号则需要自己安装了，一种方式是从<a href="https://nodejs.org/en/" target="_blank" rel="noopener">官网</a>下载安装包安装，另一种则是通过brew来安装node，mac下当然推荐使用brew来安装了，首先打开<a href="https://brew.sh/index_zh-cn" target="_blank" rel="noopener">homebrew官网</a>，粘贴主页上的命令到终端即可安装完成.</p>
<p><img src="/images/temp/屏幕快照 2019-04-12 下午10.39.16.png" alt></p>
<p>安装完成后只需要在终端输入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">brew link node</span><br><span class="line">brew uninstall node</span><br><span class="line">brew install node</span><br></pre></td></tr></table></figure>
<p>再次输入 node -v 如果显示了版本号，这样就成功的安装了最新版的node.js</p>
<h3 id="2-安装hexo"><a href="#2-安装hexo" class="headerlink" title="2.安装hexo"></a>2.安装hexo</h3><p>1.使用npm安装hexo</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>
<p>2.初始化hexo目录</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo init &lt;folder&gt; #我的是hexo_site#</span><br><span class="line">cd &lt;folder&gt;</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>
<p>新建完成后，指定文件夹的目录如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">├── _config.yml</span><br><span class="line">├── package.json</span><br><span class="line">├── scaffolds</span><br><span class="line">├── source</span><br><span class="line">|   ├── _drafts</span><br><span class="line">|   └── _posts</span><br><span class="line">└── themes</span><br></pre></td></tr></table></figure>
<p>下面来简单的介绍一下比较重要的文件</p>
<p><code>_config.yml</code>：网站的配置文件，可以在此配置大部分参数，主题中也会有一个同名的主题配置文件，稍后讲解。<br><code>source</code>：资源文件夹是存放用户资源的地方。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。<br><code>themes</code>：主题文件夹，后面我们使用的next主题即会存放在此。<br><code>_posts</code>：存储你发表在博客上的文章，当Hexo 初始化一个站点时，里面会有一篇默认的博文。</p>
<p>3.Hexo 配置<br>Hexo配置主要在_config.yml文件中，下面是一些简单的配置，更具体详细的配置可以查看<a href="https://hexo.io/zh-cn/docs/" target="_blank" rel="noopener">Hexo官方文档</a>.</p>
<table>
<thead>
<tr>
<th style="text-align:center">paramate</th>
<th style="text-align:center">description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">title</td>
<td style="text-align:center">网站标题</td>
</tr>
<tr>
<td style="text-align:center">subtitle</td>
<td style="text-align:center">网站副标题</td>
</tr>
<tr>
<td style="text-align:center">description</td>
<td style="text-align:center">网站描述</td>
</tr>
<tr>
<td style="text-align:center">author</td>
<td style="text-align:center">您的名字</td>
</tr>
<tr>
<td style="text-align:center">language</td>
<td style="text-align:center">网站使用的语言</td>
</tr>
<tr>
<td style="text-align:center">timezone</td>
<td style="text-align:center">网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。</td>
</tr>
</tbody>
</table>
<p>4.部署到github</p>
<p>首先需要安装 hexo-deployer-git</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
<p>安装完成后，进入刚才新建的博客文件夹内，我的是hexo_site</p>
<p><img src="/images/temp/屏幕快照 2019-04-12 下午10.51.50.png" alt></p>
<p>5.编辑配置文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim _config.yml</span><br></pre></td></tr></table></figure>
<p>修改_config.yml文件中的配置如下：</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"><span class="attr">  type:</span> <span class="string">git</span></span><br><span class="line"><span class="attr">  repo:</span> <span class="string">&lt;repository</span> <span class="string">url&gt;</span> <span class="comment">#你的 【你的名字】.github.io  这一项目的git仓库地址#</span></span><br><span class="line"><span class="attr">  branch:</span> <span class="string">master</span></span><br><span class="line"><span class="attr">  message:</span> <span class="string">[message]</span> <span class="comment">#可不填写#</span></span><br></pre></td></tr></table></figure>
<p>注意：在配置所有的yml文件时候包括 theme中的_config.yml，在所有的冒号后面都要加一个空格否则hexo命令会出错，接下来执行以下命令：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean   #清除</span><br><span class="line">hexo g       #生成静态页面</span><br><span class="line">hexo d			 #部署到git仓库</span><br></pre></td></tr></table></figure>
<p>现在，登录到你的github pages 上查看你的博客吧。直接在浏览器命令行键入 ：</p>
<p><code>http://&lt;你的GitHub用户名&gt;.github.io</code> </p>
<h3 id="3-主题安装"><a href="#3-主题安装" class="headerlink" title="3.主题安装"></a>3.主题安装</h3><p>1.可以从<a href="https://hexo.io/themes/" target="_blank" rel="noopener">官方的主题</a>里面挑选自己喜欢的主题，所有的主题安装方法基本都大同小异具体参照文档来搞，这里就简单介绍一下最核心的几点，首先切换到hexo文件夹下： </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd hexo-site  #cd到自己的站点 我的是hexo-site#</span><br><span class="line">git clone https://github.com/huyingjie/hexo-theme-A-RSnippet.git themes/a-rsnippet #拉取主题到本地 themes文件夹下</span><br></pre></td></tr></table></figure>
<p>然后修改_config.yml配置文件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim _config.yml</span><br></pre></td></tr></table></figure>
<p>切换主题为刚才下载的 a-rsnippet ：</p>
<p><img src="/images/temp/屏幕快照 2019-04-12 下午11.15.13.png" alt></p>
<p>然后esc   :wq 保存</p>
<p>接着我们来更新到git</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure>
<p>然后打开你的博客地址 你的用户名.github.io 就可以查看效果了，具体详细的配置请根据不同主题的文档来修改，这里就不一一介绍了。</p>
<p>enjoy!!</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/04/11/Hexo-github搭建属于自己的个人博客/" data-id="cjugwhxir0000a37fncb84wxw" class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hexo/">hexo</a></li></ul>

    </footer>

  </div>

  
    
  <nav class="article-nav">
    
      <a href="/2019/04/14/带你进入-Activiti-工作流的世界/" class="article-nav-link">
        <strong class="article-nav-caption">Newer posts</strong>
        <div class="article-nav-title">
          
            带你进入 Activiti 工作流的世界
          
        </div>
      </a>
    
    
  </nav>


  

  
    
  <div class="gitalk" id="gitalk-container"></div>
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '3bcdf06833d08d450760',
      clientSecret: '08222ca2c645e011ab654dc2ef8996fdb16005e1',
      repo: 'tinybao.github.io',
      owner: 'tinybao',
      admin: ['tinybao'],
      // id: location.pathname,      // Ensure uniqueness and length less than 50
      id: md5(location.pathname),
      distractionFreeMode: false,  // Facebook-like distraction free mode
      pagerDirection: 'last'
    })

  gitalk.render('gitalk-container')
  </script>

  

</article>



</section>
<!--打赏-->
        <div class="reward">
       <div class="reward-button">赏 <span class="reward-code">
        <span class="alipay-code"> <img class="alipay-img wdp-appear" src="/images/ecode/alipay.png"><b>支付宝打赏</b> </span> 
        <span class="wechat-code"> <img class="wechat-img wdp-appear" src="/images/ecode/weipay.png"><b>微信打赏</b> </span> 
       </span></div>
      <p class="reward-notice">如果文章对你有帮助，欢迎点击上方按钮打赏作者</p>
      </div>
<!-- 打赏-->

  <footer class="footer">
  
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2019 Sean</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Hosted on  <a href="https://github.com">Github</a></li>  </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>

<nav class="navbar">
  
    <div class="logo">
      <a href="/"><img src="/images/shark.svg" alt="Sean"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/">主页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/archives">归档</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="Search">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>

<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>

<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>
<script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/lazyload.min.js"></script>
<script src="/js/busuanzi-2.3.pure.min.js"></script>


  <script src="/fancybox/jquery.fancybox.min.js"></script>



  <script src="/js/search.js"></script>


<script src="/js/ocean.js"></script>

</body>
</html>